<template>
	<div>
		<!-- <el-carousel indicator-position="outside">
			<el-carousel-item v-for="item in bannerList" :key="item.slideId">
			<img :src="item.slideImage" alt="">
			</el-carousel-item>
		</el-carousel>  -->

		<Header :activIndex = "activIndex"></Header>
		<div class="swiper-container index_swiper">
			<el-carousel :interval="5000" arrow="always" height='490px' indicator-position = 'none' >
				<el-carousel-item  v-for="(item,i) in bannerList" :key="i">
					<img :src="item.slideImage" class="carousel_img">
				</el-carousel-item>
			</el-carousel>
<!--			<el-carousel :interval="5000" arrow="always" height='490px' indicator-position = 'none'   element-loading-background="rgba(0, 0, 0, 0.5)">-->
<!--				<el-carousel-item v-for="(item,i) in bannerList" :key="i">-->
<!--					<img :src="item.slideImage" class="carousel_img">-->
<!--				</el-carousel-item>-->
<!--			</el-carousel>-->
			<!--			<div class="swiper-wrapper">-->
<!--				<div class="swiper-slide" v-for="item in bannerList" :key="item.slideId">-->
<!--					<img :src="item.slideImage" alt="">-->
<!--				</div>-->
<!--			</div>-->
			<!-- 如果需要分页器 -->
<!--			<div class="swiper-pagination"></div>-->
<!--			&lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
<!--			<div class="swiper-button-prev"></div>-->
<!--			<div class="swiper-button-next"></div>-->
<!--			-->
<!--			&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
<!--			<div class="swiper-scrollbar"></div>-->
			</div>


		<!-- <div class="textBox flex">
        <img src="../assets/announcement.png" class="announcement_img" alt="">
        <transition name="slide">
          <p class="text" :key="text.id" @click="toLink(text.val.url)" v-if="text.val">{{text.val.title}}</p>
        </transition>
      </div> -->


		
		 <div class="main_width flex_row_cen announcement">
			 <img src="../assets/announcement.png" class="announcement_img" alt="">
			 <div class="swiper-container index_swiper_2">
				<!-- <div class="swiper-wrapper">
					<div class="swiper-slide Trumpet_slide">
						<a :href="item.windowUrl" target="_blank" v-for="item in trumpetList" :key="item.windowId">{{item.windowTitle}}</a>
					</div>
				</div> -->
				<transition name="slide">
					<p style="cursor: pointer;" class="text" :key="text.id" @click="toLink(text.val.url)" v-if="text.val">{{text.val.title}}</p>
				</transition>
			</div>
				
		 </div>


		 <div class="flex main_width phone_content">
			 <div class="w60">
				<div class="swiper-container index_swiper_3">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in advertisingList" :key="item.adId">
							<a :href="item.adUrl" target="_blank">
								<img :src="item.adImage" alt="">
							</a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			 </div>
			 <div class="w40">
				 <div class="fx_sw_cen sm_tit">
					 <div class="tit_lf"><div>公告</div></div>
					 <router-link :to="{path:'projectAnnouncement',query:{active:2}}">
					 	<div class="more">更多>></div>
					 </router-link>
				 </div>
				 <div class="announcement_list">
					 <div>
						<div>标题</div>
						<div>发布时间</div>
					 </div>
					 <div v-for="(item, index) in subjectClinchList" :key="index" @click="getProDetail(item)">
						<div class="noticeOvflow flow" :title="item.subjectName">{{item.subjectName}}</div>
						<div>{{item.createDate | format}}</div>
					 </div>
				 </div>
			 </div>
		 </div>
		 <div class="main_width mt_50">
			  <div class="fx_sw_cen sm_tit">
					 <div class="tit_lf"><div>项目</div></div>
					  <router-link :to="{path:'projectAnnouncement',query:{active:1}}">
					 	<div class="more">更多>></div>
					 </router-link>
				 </div>
				 <div class="announcement_list custom_amt">
					 <div>
						<div class="ptitle">标的编号</div>
						<div class="w30 pname">标的名称</div>
						<div class="pprice">挂牌价格</div>
						<div class="phoneNone">披露起始日</div>
						<div class="phoneNone">点击量</div>
					 </div>	
					 <div v-for="(item,index) in projectList" :key="index" @click="getProDetails(item)">
						  <div class="ptitle">{{item.subjectNum}}</div>
						  <div class="w30 flow pname" :title="item.subjectName">{{item.subjectName}}</div>
						  <div class="pprice">{{item.transferReservePrice}}</div>
						  <div class="phoneNone">{{item.disclosureStartDate }}</div>
						  <div class="phoneNone">{{item.clicks}}</div>
					 </div>
				 </div>
		 </div>
		 <div class="flex main_width mt_50 phone_content">
			 <div class="w65">
				 <div class="fx_sw_cen sm_tit">
					 <div class="tit_lf tit_lf_big"><div>政策法规</div></div>
					 <router-link to="policyRule">
					 	<div class="more">更多>></div>
					 </router-link>
				 </div>
				 <div class="announcement_list">
					 <div>
						<div>标题</div>
						<div>发布时间</div>
					 </div>
					 <div v-for="item in policyList" :key="item.newsId" @click="toDetails(item)">
						<div class="w620 flow" :title="item.ruleTitle">{{item.ruleTitle}}</div>
						<div>{{item.createDate}}</div>
					 </div>
				 </div>
			 </div>
			 <div class="w35 property">
				 <a href="http://www.chanjs.com/jd.html" target="_blank">
					<img src="../components/static/img/property.jpg" alt="">
				 </a>
				 <a href="http://www.chanjs.com/nccq.html" target="_blank">
					<img src="../components/static/img/sma_ban.jpg" alt="" class="mt_10">
				 </a>
			 </div>
		 </div>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import Header from "../components/header"	
	export default {
   		 components:{
			Header,
		},		
		data() {
			return {
				activIndex:1,
				projectList: [],
				subjectClinchList: [],
			  bannerList:[],
			  trumpetList:[],
			  advertisingList:[],
			  policyList:[],
				footMsg:{},
				


				textArr: [],
				number: 0
			}
		},
		mounted(){
			this.getBanner();
			this.getSubjectClinchInfo();
			this.getTrumpet();
			this.getProjectInfo();
		},
		filters: {
			format(val) {
				return val.slice(0,10)
			},
		},
		computed: {
    	text() {
      	return {
					id: this.number,
					val: this.textArr[this.number]
      	};
			 }
		},
		methods:{
			toLink(url) {
				url!=""?window.open(url):"";
			},
			// 公告
            getProDetail(row) {
			   var routeData = ''
               if(!row.announcementType) {
				   	routeData = this.$router.resolve({ name: 'clinchDetail',query:{id:row.clinchId}});
					//  this.$router.push({path:'clinch_detail',query:{id:row.clinchId}})
					 window.open(routeData.href, '_blank');
                }else {
					if(row.announcementType) routeData = this.$router.resolve({ name: 'zzDetail',query:{id:row.announcementId}});
					window.open(routeData.href, '_blank');
                    // if(row.announcementType) this.$router.push({path:'zz_detail',query:{id:row.announcementId}})
				} 
				
			},			
			getProDetails(row) {
				var routeData = ''
				switch (row.detailType) {
					case 2:
						routeData = this.$router.resolve({ name: 'transferDetail',query: {id: row.subjectId}});
						// this.$router.push({path:'/transfer_detail',query: {id: row.subjectId}})
						break;
					case 3:
						routeData = this.$router.resolve({ name: 'formalDetail',query: {id: row.subjectId}});
						// this.$router.push({path:'/formal_detail',query: {id: row.subjectId}})
						break;
					case 4:
						routeData = this.$router.resolve({ name: 'realtorDetail',query: {id: row.subjectId}});
						// this.$router.push({path:'/realtor_detail',query: {id: row.subjectId}})
						break;
					case 5:
						routeData = this.$router.resolve({ name: 'increaseDetail',query: {id: row.subjectId}});
						// this.$router.push({path:'/increase_detail',query: {id: row.subjectId}})
						break;
					case 6:
						routeData = this.$router.resolve({ name: 'assettransferDetail',query: {id: row.subjectId}});
						// this.$router.push({path:'/assettransfer_detail',query: {id: row.subjectId}})
						break;
					default: break;
				}
				window.open(routeData.href, '_blank');
			},
			toDetails(val){
				var routeData = ''
				routeData = this.$router.resolve({ name: 'policyDetails',query:{id:val.ruleId}});
				window.open(routeData.href, '_blank');
				// this.$router.push({path:'/policyDetails',query:{id:val.ruleId}})
			},
			//获取项目信息
			getProjectInfo() {
				this.get('/info/announcement/project/page',{
					page: 1,
					limit: 10,
					orderField: 'createDate',
				}).then(data => {
					this.projectList = data.data.list;	
				})
			},
			//获取公告信息
			getSubjectClinchInfo() { 
				this.get('/info/announcement/subjectClinch/page',{
					page: 1,
					limit: 10,
					orderField: 'createDate',
					// order: 'desc'
				}).then(data => {
					// console.log(data)
					this.subjectClinchList = data.data.list;	
				})
			},
			// 获取banner
			getBanner(){
				let that=this;
				this.post('/api/rules/index').then(data=>{
					this.bannerList=data.data.slidesDTOList;
					this.advertisingList=data.data.adsDTOList;
					this.policyList=data.data.rulesDTOList;
					this.$nextTick(function(){
						// banner
				// 　　　　var mySwiper = new Swiper(".index_swiper",{
				// 　　　　　direction:"horizontal",/*横向滑动*/
				// 　　　　 loop:true,//形成环路（即：可以从最后一张图跳转到第一张图
				// 		pagination:{
				// 			el:".swiper-pagination",
				// 			clickable:true
				// 		},
				// 		navigation: {
				// 			nextEl: '.swiper-button-next',
				// 			prevEl: '.swiper-button-prev',
				// 		},
				// 　　　　 　autoplay:true/*每隔3秒自动播放*/
				// 　　　　});
						// 中间广告
				// 		var mySwiper = new Swiper(".index_swiper_3",{
				// 　　　　　direction:"horizontal",/*横向滑动*/
				// 　　　　 　loop:true,//形成环路（即：可以从最后一张图跳转到第一张图
				// 			pagination:{
				// 				el:".swiper-pagination",
				// 				clickable:true
				// 			},
				// 　　　　 　autoplay:{
				// 				delay:500,
				// 	  }
				// 　　　　});
				　　})
				})
			},
			startMove() {
			// eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number ===  this.textArr.length-1) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    	},
			// 获取小喇叭
			getTrumpet(){
				this.post('/api/window/index').then(data=>{
					this.trumpetList=data.data.windowDTOList;

					let result = data.data
          result.windowDTOList.forEach(element => {
             this.textArr.push({title:element.windowTitle,url:element.windowUrl})
					});
           this.textArr.length > 1?this.startMove():"";
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.announcement{
		font-size: 14px;
		margin: 20px auto;
		height: 18px;
	}
	.announcement_img{
		width: 25px;
		height: 25px;
		margin-right: 20px;
	}
	.w60{
		width: 58%;
	}
	.w40{
		width: 40%
	}
	.w65{
		width: 63%;
	}
	.w35{
		width: 35%
	}
	.sm_tit{
		background: #F5F5F5;
		border-top:1px solid #2C9F45;
	}
	// .Trumpet_slide{
	// 	height: 15px!important;
	// }
	.tit_lf{
		background:url("../components/static/img/rectangle1.png") no-repeat center;
		color: #fff;
		 font-size: 15px;
		 width: 105px;
		 height: 33px;
		 position: relative;
		bottom: 1px;
		letter-spacing:4px;
		line-height: 32px;
		>div{
			padding-left:20px; 
		}
	}
	.tit_lf_big{
		background:url("../components/static/img/rectangle2.png") no-repeat center;
		width: 140px;
	}
	.more{
		color: #2C9F45;
		font-size: 14px;
		margin-right:15px;

	}
	.announcement_list>div{
		display: flex;
		justify-content: space-between;
		margin: 13px 20px;
		cursor: pointer;
	}
	.announcement_list>div:first-child{
		font-weight: 600
	}
	.custom_amt>div>div{
		width: 15%;
	}
	.custom_amt>div>div.w30{
		width: 40%
	}
	.index_swiper_2{
		margin: 0
	}
	.custom_amt>div>div:nth-child(5){
		width: 50px
	}
	.index_swiper_3 .swiper-slide img{
		height: 350px;
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%
	}
	.property img{
		width: 100%;
	}

.textBox {
	margin-top: 50px;
	overflow: hidden;
	text-align: center;
}
	.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
/deep/ .el-carousel__arrow--left{
	left: 16%;
}
/deep/ .el-carousel__arrow--right{
	right: 16%;
}
.carousel_img[data-v-53a9ca8a] {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.noticeOvflow{
	width: 340px;
}
.flow{
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;	
}
.w620{width: 620px;}
.w464{width: 464px;}
</style>